<template>
    <div style="">
        <DataOverview />
        <el-card shadow="hover">
            <div ref="lineChartRef" style="height: 400px"></div>
            <div ref="chartRef" style="height: 400px"></div>
            <div ref="chartRef1" style="height: 400px"></div>
            <p style="height: 500px"></p>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { getHomeData } from '@/api/base'
    import { onMounted } from 'vue'
    import DataOverview from './DataOverview.vue'
    import { useEcharts, type ECOption } from '@/composables/useEcharts'
    const lineChartOptions = ref<ECOption>({
        title: {
            text: '用户数量增长图'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '2%',
            right: '2%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '数量',
                type: 'line',
                stack: 'Total',
                data: []
            }
        ]
    })
    const chartOptions = ref<ECOption>({
        color: ['#5470c6'],
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [23, 24, 18, 25, 27, 28, 25]
            }
        ]
    })

    const chartOptions1: ECOption = {
        title: {
            text: '基础折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        // legend: {
        //     data: ['Email', 'Union Ads', 'Video Ads']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '数量',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            }
        ]
    }

    const theme = ref<'light' | 'dark'>('light') // 响应式主题切换
    const { chartRef: lineChartRef, updateOptions: updateLineOptions } = useEcharts(lineChartOptions.value)
    const { chartRef, updateOptions } = useEcharts(chartOptions.value)
    const { chartRef: chartRef1 } = useEcharts(chartOptions1)

    onMounted(() => {
        console.log('Index')
        getHomeData().then((res: any) => {
            console.log(res.data)
            ;(lineChartOptions.value.xAxis as any).data = Object.keys(res.data.users)
            ;(lineChartOptions.value.series as any)[0].data = Object.values(res.data.users)
            updateLineOptions({ ...lineChartOptions.value })
        })
        //更新数据示例
        setTimeout(() => {
            chartOptions.value.series = [
                {
                    type: 'bar',
                    data: [203, 204, 180, 250, 270, 208, 205]
                }
            ]
            updateOptions({ ...chartOptions.value })
        }, 3000)
    })
</script>

<style lang="scss" scoped></style>
